<!-- xiaomu封装的组件：签约管理、服务管理、居民管理的 居民信息编辑表单 -->
<template>
  <div class="mu-info-box">
    <!-- 表格 -->
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="auto" inline require-asterisk-position="right">
      <el-form-item label="签约编号">
        <span>{{ formData._id }}</span>
      </el-form-item>
      <el-form-item label=" 签约状态">
        <span :style="{ color: signStatesData[formData.state]?.color }" style="font-weight: 600; font-size: 16px;">
          {{ signStatesData[formData.state]?.label }}
        </span>
      </el-form-item>
      <el-form-item label="签约机构" prop="organizationId">
        <el-select v-model="formData.organizationId" size="default" clearable placeholder="请选择">
          <el-option :label="item.name" :value="item._id" v-for="item in organizationsData.rows" :key="item._id" />
        </el-select>
      </el-form-item>
      <el-form-item label="签约团队" prop="teamId">
        <el-select v-model="formData.teamId" size="default" clearable placeholder="请选择">
          <el-option :label="item.name" :value="item._id" v-for="item in doctorTeamsData.rows" :key="item._id" />
        </el-select>
      </el-form-item>
      <el-form-item label="签约医生" prop="doctorId">
        <el-select v-model="formData.doctorId" size="default" clearable placeholder="请选择">
          <el-option :label="item.name" :value="item._id" v-for="item in doctorsData.rows" :key="item._id" />
        </el-select>
      </el-form-item>
      <el-form-item label="服务包" prop="servicePackId">
        <el-select v-model="formData.servicePackId" size="default" clearable placeholder="请选择">
          <el-option :label="`${item.name}￥${item.price}`" :value="item._id" v-for="item in servicePacksData.rows"
            :key="item._id" />
        </el-select>
      </el-form-item>
      <el-form-item label="签约类型">
        <span>首次签约</span>
      </el-form-item>
      <el-form-item label="签约周期">
        <span>1年</span>
      </el-form-item>
      <el-form-item label="费用">
        <span>{{servicePacksData.rows.find(item => item._id == formData.servicePackId)?.price ?? '暂无数据'}}</span>
      </el-form-item>
      <el-form-item label="申请时间">
        <span>{{ formData.applyTime }}</span>
      </el-form-item>
      <el-form-item label="生效日期" prop="effectiveDate">
        <el-date-picker v-model="formData.effectiveDate" placeholder="请选择日期" size="default" clearable />
      </el-form-item>
    </el-form>
    <el-form-item label="签约备注" prop="remark" style="font-size: 14px; width: 700px;">
      <el-input v-model="formData.remark" type="textarea" placeholder="请输入" :autosize="{ minRows: 7 }" />
    </el-form-item>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

import type { FormInstance } from 'element-plus'

import { useFindData } from '@/composables/findData';

defineEmits(['searchSigns']);

const {
  signStatesData,
  findOrganization,
  organizationsData,
  searchDoctorTeams,
  doctorTeamsData,
  searchDoctors,
  doctorsData,
  servicePacksData,
  findServicePacks,
} = useFindData();

const formData: any = defineModel('formData');

const formRef = ref<FormInstance>();

// 表单验证规则
const rules: any = ref({
  organizationId: [{ required: true, message: '必填项' }],
  teamId: [{ required: true, message: '必填项' }],
  doctorId: [{ required: true, message: '必填项' }],
  servicePackId: [{ required: true, message: '必填项' }],
  effectiveDate: [{ required: true, message: '必填项' }],
});



onMounted(() => {
  findOrganization();
  searchDoctorTeams();
  findServicePacks();
  searchDoctors();
})



// 事件：确认 按钮 点击
const onSubmit = async () => {
  let isPassed = ref(true);
  if (!formRef.value) return;
  await formRef.value.validate((valid) => {
    isPassed.value = valid;
  })
  return isPassed.value;
}



// 暴露给父组件的方法
defineExpose({
  onSubmit
});
</script>

<style scoped lang="scss">
.mu-info-box {

  // 去掉 label 左外边距
  :deep(.el-form-item__label-wrap) {
    margin-left: 0 !important;
  }

  .el-form {
    display: grid;
    grid-template-columns: repeat(4, 340px);
    grid-template-rows: repeat(3, 50px);
    justify-content: space-between;
  }
}
</style>